<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@include file="include.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>管理我的库</title>
<script src="js/metroui/js/jquery.dataTables.min.js"></script>
</head>
<body>
<button id="show1">创建库</button>

<button id="show2">管理库</button>

<div data-role="dialog" data-close-button="true" data-overlay="true" data-overlay-color="op-dark"
 data-overlay-click-close="true" data-type="info"  id="crelib" class="padding10">
    <h1>创建库</h1>

	<div class="input-control text info">
   <input type="text" id="lbn" name="libraryname">
   </div>
   <button onclick="createLib()" class="button">创建</button>
   <p id="result"></p>
   </div>
    
    
    <table class="table striped hovered dataTable border bordered" id="LibraryTable" style="width:100%;">
                <thead>
                <tr>
                    <th class="text-left">LibraryID</th>
                    <th class="text-left">LibraryName</th>
					
                </tr>
                </thead>

                <tbody>
                </tbody>
    </table>
    
    
    
    
    
    
    <div data-role="dialog" data-close-button="true" data-overlay="true" data-overlay-color="op-dark"
 data-overlay-click-close="true" data-type="info"   id="altlib"  class="padding20">
    <h1>管理库</h1>
    <div class="input-control select">
	<select id="mylib"></select>
	</div>
	<button id="dellib" class="button danger">删除该库</button><br/><br/>
	<div class="input-control text info">
	<input type="text" id="cb" name="libraryname">
	</div>
	<button id="alib" class="button" onclick="renameLib()">修改库名</button>
   	<p id="result2"></p>
    </div>
    <script type="text/javascript">

    $(document).ready(function(){
    	$("#show1").click(function(){
    		metroDialog.open("#crelib");
    	});  
    	
    	$("#show2").click(function(){
    		metroDialog.open("#altlib");
    	}); 
    	
		$("#LibraryTable").DataTable( {
			ajax:"listLibrary.action",
			columns: [
	            { "data": "libraryid" },
	            { "data": "libraryname"}
	            ]
		});
    	
    	
    	$.get("listLibrary.action",function(result){
    		for(var i=0;i<result.data.length;i++)
    		$("#mylib").append("<option value='"+result.data[i].libraryid+"'>"+result.data[i].libraryname+"</option>");
    	});
    	
    	$("#dellib").click(function(){
    		
    		deleteLib();
    		//$.post("delLibrary.action",{libaryid:li});
    	});
		
    });
    function createLib(){
    	var libname=$("#lbn").val();

    	$.post("createLibrary.action",{libraryname:libname},function(result){
    		alert(result);
    		$("#result").html(result);
    		$("#lbn").val("");
    	});
    }
	
    function deleteLib(){
    	
    	var li=$("#mylib").val();
    	
    	alert(li);
    	
    	$.post("delLibrary.action",{libraryid:li},function(result){
    		alert(result);
    		$("#result2").html(result);
    	});
    }
function renameLib(){
    	
    	var li=$("#mylib").val();
    	var libname=$("#cb").val();
    	alert(li);
    	
    	$.post("renamelibrary.action",{libraryid:li,libraryname:libname},function(result){
    		alert(result);
    		$("#result2").html(result);
    	});
    }
    </script>
    
</body>
</html>